/*
 * @Title: 攻略-组件
 * @Created by: gsjPC 
 */
<template>
	<view class="content">
		<IndexHead :config="navConfig1" v-if="tabIndex==1"/>
		<IndexHead :config="navConfig2" v-if="tabIndex==2"/>
		<IndexHead :config="navConfig3" v-if="tabIndex==3"/>
		<view class="tab-bar">
			<!-- 选项卡头部 -->
			<view class="glmoreTabBox">
				<view class="glmoreTab">
					<block>
						<view
							v-for="(tab,index) in tabBars"
							:key="tab.id"
							:class="tabIndex==index ? 'active' : ''"
							@tap="tapTab(index)">
							{{tab.name}}
						</view>
					</block>
				</view>	
				<!-- 个人游记点击下拉 -->
				 <view class="pullTc" v-if="isShowPullTc">
					<block
					v-for="(pullTcList,index) in pullTcLists"
					:key="index">
						<view class="pullTc-item" :class="pullTcIndex==index ? 'active' : ''" @tap="tapPullTc(index)"><text>{{pullTcList.text}}</text></view>
					</block>
				</view>
				<!-- 我的行程下拉 -->
				<view class="pullTc timeAxis" v-if="isShowTimeTc">
					<block
					v-for="(timeAxis,index) in timeAxisList"
					:key="index">
						<view class="pullTc-item" :class="timeAxisIndex==timeAxis.id ? 'active' : ''" @tap="tabTimeAxis(timeAxis.id)"><text>{{timeAxis.text}}</text></view>
					</block>
				</view>
			</view>
		</view>
		<!--选项卡内容 	@change="touchChange"-->
		<view
		:current="tabIndex"
		duration="300"
		class="swiper-box">
			<view></view> <!--占位，否则view滑动有问题-->
			<view><myself-tour v-if="tabIndex == 1"></myself-tour></view>
			<view><question-made v-if="tabIndex == 2"></question-made></view>
			<view><my-route v-if="tabIndex == 3" :timeAxisIndex="timeAxisIndex"></my-route>
			</view>
		</view>
	</view>	
</template>

<script>
	import myselfTour from '@/pages/gonglue/myselfTourNote/myselfTourNote'
	import myRoute from '@/pages/gonglue/myRoute/myRoute'
	import questionMade from '@/pages/gonglue/questionMade/questionMade1'
	import timeAxis from '@/pages/gonglue/myRoute/timeAxis'
	export default {
		components:{
			myRoute,
			myselfTour,
			questionMade,
			timeAxis
		},
		data() {
			return {
				// 个人游记头部
				navConfig1:{
					backgroundColor: 'transparent',
					color: '#fff',
					common:{
						hasSearchMid:true,
						hasMenu: false,
						hasTitle: true,
						headHeight:200,
						fixBg:false
					},
					left: {
						img:'',
						text:'',
						backToUrl:'/pages/gonglue/gonglue'
					},
					mid:{
						title:'',
					},
					right:{
						
					}
				},
				// 问卷定制头部
				navConfig2:{
					backgroundColor: 'transparent',
					color: '#fff',
					common:{
						hasSearch: false,
						hasMenu: false,
						hasTitle: true,
						headHeight:200,
						fixBg:false
					},
					left: {
						img:'',
						text:'',
						backToUrl:'/pages/gonglue/gonglue'
					},
					mid:{
						title:'问卷定制',
						hasSearchMid:false
					},
					right:{
						
					}
				},
				// 我的行程头部
				navConfig3:{
					backgroundColor: 'transparent',
					color: '#fff',
					common:{
						hasSearch: false,
						hasMenu: false,
						hasTitle: true,
						headHeight:200,
						fixBg:false
					},
					left: {
						img:'',
						text:'',
						backToUrl:'/pages/gonglue/gonglue'
					},
					mid:{
						title:'我的行程',
						hasSearchMid:false
					},
					right:{
						
					}
				},
				tabIndex: null ,//默认选中第一个tab 
				tabBars:[
					{name:'官方攻略'},
					{name:'个人游记'},
					{name:'问卷定制'},
					{name:'我的行程'}
				],
				pullTcLists:[
					{text:'个人游记'},
					{text:'附近的人'},
					{text:'关注的人'},
				],
				timeAxisList:[
					{text:'我的行程',id:0},
					{text:'时间轴',id:1}
				],
				isShowPullTc:false, //个人游记下拉
				pullTcClick2:0,//默认点击0次个人游记
				pullTcIndex:0, //个人游记点击下拉默认选中第一个
				
				isShowTimeTc:false,//我的行程下拉
				timeAxisIndex:0 ,//我的行程下拉默认选中第一个
				timeAxisClick2:0,//默认点击0次我的行程tab
			}
		},
		methods:{
			stopTouchMove(e){
				return false
			},
		// 手势左右滑动切换
			touchChange(e){
				console.log(e);
				if(e.detail.source == "touch"){
					setTimeout(()=>{
							this.tabIndex = e.detail.current
					},300)
					if(e.detail.current == 0){
						uni.switchTab({
							url:'/pages/gonglue/gonglue'
						})
					}
					console.log(this.tabIndex);
				}
			},
			tapTab(index){
				this.tabIndex = index
				console.log('tab切换'+index);
				if(this.tabIndex == 0){
					uni.switchTab({
						url:'/pages/gonglue/gonglue'
					})
				}
				// 当点击tabIndex是个人游记
				if(this.tabIndex == 1){
					this.pullTcClick2 ++;
					// console.log('点击次数:'+ this.pullTcClick2);
					if(this.pullTcClick2 > 1){
						this.isShowPullTc = !this.isShowPullTc
					}else{
						this.isShowPullTc = false;
					}
				}else{
					this.isShowPullTc = false;
					 
					this.pullTcClick2 = 0; //其他tabbar下点击次数默认还原0
					
				};
				// 当点击tabIndex是我的行程
				if(this.tabIndex == 3){
					this.timeAxisClick2++;
					if(this.timeAxisClick2 > 1){
						this.isShowTimeTc = !this.isShowTimeTc
					}else{
						this.isShowTimeTc = false;
					}
					
				}else{
					this.isShowTimeTc = false;
					this.timeAxisClick2 = 0;//其他tabbar下点击次数默认还原0
					
					
				}
			},
			// 个人游记点击切换样式
			tapPullTc(index){
				this.pullTcIndex = index;
				setTimeout(()=>{
					this.isShowPullTc = false;
				},200);
				this.tabBars[1].name = this.pullTcLists[index].text
			},
			// 我的行程点击切换样式
			tabTimeAxis(id){
				this.timeAxisIndex = id;
				// console.log('timeAxisIndex' +this.timeAxisIndex);
				setTimeout(()=>{
					this.isShowTimeTc = false;
				},200);
				this.tabBars[3].name = this.timeAxisList[id].text
			}
		},
		onLoad() {
			console.log(this.$store.state.tabInd);
			this.tabIndex = this.$store.state.tabInd;
			if(this.$store.state.tabInd == 1){
				this.pullTcClick2 = 1
			}
			if(this.$store.state.tabInd == 3){
				this.timeAxisClick2 = 1
			}
			// uni.startPullDownRefresh();
		},
		mounted() {
			
		}
		// onPullDownRefresh() {
		//         console.log('refresh');
		//         setTimeout(function () {
		//             uni.stopPullDownRefresh();
		//         }, 1000);
		//     }
	}
</script>

<style>
	page, .content{
		height: 100%;
	}
	.glmoreTabBox{
		position: relative;
	}
	.glmoreTab{
		width:100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top:-82upx;
		/* margin-bottom: 40upx; */
	}
	.glmoreTab > view{
		flex: 1;
		text-align: center;
		font-size: 24upx;
		color: #0075EE;
		line-height: 54upx;
		position: relative;
	}
	.glmoreTab > view:nth-child(2):after{
		content:"";
		display: inline-block;
		margin-left:10upx;
		margin-bottom: -6upx;
		border:10upx solid transparent;
		border-top-color: #55A0FF !important;
	}
	.glmoreTab > view:nth-child(4):after{
		content:"";
		display: inline-block;
		margin-left:10upx;
		margin-bottom: -6upx;
		border:10upx solid transparent;
		border-top-color: #55A0FF !important;
	}
	.glmoreTab .active{
		font-weight: bold;
	}
	.glmoreTab .active:before{
		content:"";
		width:102upx;
		height: 3upx;
		background:linear-gradient(left,#8EC6FF,#6592F7);
		display:block;
		margin: auto;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -51upx;
	}
	/*个人游记下拉样式 */
	.pullTc{
		width:140upx;
		border-radius:10upx;
		background-color: #fff;
		padding-top: 12upx;
		padding-bottom:12upx;
		box-sizing: border-box;
		position: absolute;
		z-index: 10;
		top:52upx;
		left: 208upx;
		}
	.pullTc-item{
		height: 50upx;
		line-height: 50upx;
		font-size: 24upx;
		text-align: center;
		color: #666666;
		}
	.pullTc .active{
		background-color: #CBE3F9;
	}
	.timeAxis{
		right:20upx;
		left: auto;
	}
	.swiper-box{
		height: calc(100% - 110px);
		width:100%;
		overflow: scroll;
	}
</style>
